<template>
  <div>
    <!-- 密码修改 -->
    <a-modal
      title="密码修改"
      :keyboard="false"
      :maskClosable="false"
      :closable="false"
      v-model="show"
      @cancel="cancelUpdatePassword"
      @ok="handleUpdatePassword">
      <a-form :autoFormCreate="(form)=>{this.form = form}">
        <a-popover placement="rightTop" trigger="click" :visible="state.passwordLevelChecked">
          <template slot="content">
          </template>
          <a-form-item
            label='新密码'
            v-bind="formItemLayout"
            fieldDecoratorId="password"
            :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入新密码'},{ validator: this.handlePasswordCheck1 }], validateTrigger: ['change', 'blur']}">
            <a-input type="password"
                     v-model="newPassword"
                     autocomplete="false"
                     placeholder="请输入新密码"></a-input>
          </a-form-item>
        </a-popover>
        <a-form-item
          label='再次确认'
          v-bind="formItemLayout"
          fieldDecoratorId="password2"
          :fieldDecoratorOptions="{rules: [{ required: true, message: '必须包含大小写字母和数字的组合，可以使用特殊字符，长度8以上' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}">
          <a-input type="password" autocomplete="false" placeholder="确认密码"></a-input>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
  const formItemLayout = {
    labelCol: {span: 4},
    wrapperCol: {span: 18}
  }
  const levelNames = {
    0: '低',
    1: '低',
    2: '中',
    3: '强'
  }
  const levelClass = {
    0: 'error',
    1: 'error',
    2: 'warning',
    3: 'success'
  }
  const levelColor = {
    0: '#ff0000',
    1: '#ff0000',
    2: '#ff7e05',
    3: '#52c41a'
  }

  export default {
    props: {
      updatePasswordModelVisible: {
        default: false
      },
      token: {
        required: true
      }
    },
    data() {
      return {
        form: null,
        formItemLayout,
        state: {
          passwordLevel: 0,
          passwordLevelChecked: false,
          percent: 10,
          progressColor: '#FF0000'
        },
        oldPassword: '',
        newPassword: '',
        validateStatus: '',
        help: ''
      }
    },
    computed: {
      show: {
        get: function () {
          return this.updatePasswordModelVisible
        },
        set: function () {
        }
      },
      passwordLevelClass() {
        return levelClass[this.state.passwordLevel]
      },
      passwordLevelName() {
        return levelNames[this.state.passwordLevel]
      },
      passwordLevelColor() {
        return levelColor[this.state.passwordLevel]
      }
    },
    methods: {
      isMobile() {
        return this.$store.state.setting.isMobile
      },
      cancelUpdatePassword() {
        this.state.passwordLevelChecked = false
        this.form.resetFields()
        this.$emit('cancel')
      },
      handleUpdatePassword() {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$post('common/forceModifyPasswd', {
              newPasswd: this.$Base64.encode(this.newPassword),
              token: this.token
            }).then(() => {
              this.token = ''
              this.state.passwordLevelChecked = false
              this.$emit('success')
              this.form.resetFields()
            })
          }
        })
      },
      handlePasswordLevel(rule, value, callback) {
        let level = 0
        // 判断这个字符串中有没有数字
        if (/[0-9]/.test(value)) {
          level++
        }
        // 判断字符串中有没有字母
        if (/[a-zA-Z]/.test(value)) {
          level++
        }
        // 判断字符串中有没有特殊符号
        if (/[^0-9a-zA-Z_]/.test(value)) {
          level++
        }
        this.state.passwordLevel = level
        this.state.percent = level * 30
        if (level >= 2) {
          if (level >= 3) {
            this.state.percent = 100
          }
          callback()
        } else {
          if (level === 0) {
            this.state.percent = 10
          }
          callback(new Error('密码强度不够'))
        }
      },
      handlePasswordCheck(rule, value, callback) {
        console.log(222222, value)
        let password = this.form.getFieldValue('password')
        if (value === undefined) {
          callback(new Error('请输入密码'))
        }
        // var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/
        // if(!pattern.test(value.trim())){
        //   callback(new Error("必须包含大小写字母和数字的组合，可以使用特殊字符，长度8以上"));
        // }

        if (value && password && value.trim() !== password.trim()) {
          callback(new Error('两次密码不一致'))
        }
        callback()
      },

      handlePasswordCheck1(rule, value, callback) {
        console.log(11111111, value)
        if (value === undefined) {
          callback(new Error('请输入密码'))
        }
        var pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
        console.log("test", pattern.test(value))
        if (!pattern.test(value.trim())) {
          callback(new Error("必须包含大小写字母和数字的组合，可以使用特殊字符，长度8以上"));
        }
        callback()
      },
      handlePasswordInputClick() {
        if (!this.isMobile()) {
          this.state.passwordLevelChecked = true
          return
        }
        this.state.passwordLevelChecked = false
      },
      handleOldPassowrd(rule, value, callback) {
        let password = this.oldPassword
        if (this.oldPassword.trim().length) {
          this.$get('user/password/check', {
            password: password,
            username: this.user.username
          }).then((r) => {
            if (r.data) {
              callback()
            } else {
              callback(new Error('旧密码不正确'))
            }
          })
        } else {
          callback()
        }
      }
    }
  }
</script>
<style lang="less">
  .update-password {
    &.error {
      color: #ff0000;
    }

    &.warning {
      color: #ff7e05;
    }

    &.success {
      color: #52c41a;
    }
  }
</style>
